<template>
    <div class="column">
        <div class="panelLabel">
            <h1>{{ year }}年度情况：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
            <h1>{{ month }}月当月&nbsp; </h1>
            <h3>{{ thisMonth }}亿元&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h3>
            <h1>{{ month }}月累计&nbsp; </h1>
            <h3 style="color: orange">{{ accumulate }}亿元</h3>
            <h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;项目总数：</h1>
            <h3>{{ xmzs }}个</h3>
            <div class="panelLabel-foot"></div>
        </div>
        <div class="panelSmLong">
            <div class="boxb"><h2>{{ year }}年月度全社会固定资产投资</h2></div>
            <div class="panelSmLong1">
                <v-chart class="chart" :option="option1" :autoresize="true"></v-chart>
            </div>
            <div class="panelSmLong-foot"></div>
        </div>
        <div class="panelSmLong">
            <div class="boxb"><h2>{{ year }}年月度累计全社会固定资产投资</h2></div>
            <div class="panelSmLong1">
                <v-chart class="chart" :option="option3" :autoresize="true"></v-chart>
            </div>
            <div class="panelSmLong-foot"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    name: "my3",
    computed: {
        year() {
            return this.$store.year
        },
        month() {
            return this.$store.month
        }
    },
    watch: {
        '$store.time': {
            immediate: true,
            deep: true,
            handler(v) {
                this.initData()
                this.xmzs = 0;
                this.gettop1()
                this.gettop2()
                this.gettop3()
                this.gettop()
                this.getdata1()
            }
        }
    },
    methods: {
        gettop() {
            this.$util.http.get('/fixedinvestment/getFixedInvestmentByIndicators?year=' + this.year + '&&indicators=全社会固定资产投资').then(res => {
                for (var i = 0; i < res.data.length; i++) {
                    if (res.data[i].month == this.month) {
                        this.thisMonth = res.data[i].thisMonth;
                        this.accumulate = res.data[i].accumulate;
                    }
                }
            })
        },

        gettop1() {
            this.$util.http.get('/fixedinvestment/getIndustrialInvestmentgs?year=' + this.year + '&&month=' + this.month).then(res => {
                this.xmzs += res.data;
            })
        },

        gettop2() {
            this.$util.http.get('/fixedinvestment/getIndustrialInvestmentfdc?year=' + this.year + '&&month=' + this.month).then(res => {
                this.xmzs += res.data;
            })
        },
        gettop3() {
            this.$util.http.get('/fixedinvestment/getBasicIndustryInvestmentCount?year=' + this.year + '&&month=' + this.month).then(res => {
                this.xmzs += res.data;
            })
        },

        getdata1() {
            // axios.get('http://localhost:28080/fixedinvestment/getFixedInvestmentByIndicators', {
            //   params: {
            //     year: this.year,
            //     indicators:'全社会固定资产投资',
            //   }
            // }).then(res => {
            this.$util.http.get('/fixedinvestment/getFixedInvestmentByIndicators?year=' + this.year + '&&indicators=全社会固定资产投资').then(res => {
                if (res.data[0] == null) {
                    this.option1.series[0].data = []
                    this.option1.series[1].data = []
                    this.option1.series[2].data = []
                    return
                }
                for (var i = 0; i < res.data.length; i++) {
                    this.data1[res.data[i].month - 1] = res.data[i].thisMonth
                    this.data2[res.data[i].month - 1] = res.data[i].monthOnMonth
                    this.data3[res.data[i].month - 1] = res.data[i].accumulate
                }
                this.option1.series[0].data = this.data1
                this.option1.series[1].data = this.data1
                this.option1.series[2].data = this.data1
                this.option3.series[0].data = this.data3
                this.option3.series[1].data = this.data3
                this.option3.series[2].data = this.data3
                this.option3.series[3].data = this.data2
            })
        },
        initData() {
            this.thisMonth = '-'
            this.accumulate = '-'
            this.xmzs = '-'
            this.data1 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
            this.data2 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
            this.data3 = ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']
        }
    },

    data() {
        return {
            color1: '',
            thisMonth: '-',
            accumulate: '-',
            xmzs: '-',
            data1: ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'],//当月值
            data2: ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'],//当月同比值
            data3: ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'],//当月累计值


            option1: {
                tooltip: {
                    backgroundColor: "#00194A",
                    trigger: 'axis',
                    textStyle: {
                        fontSize: 16,
                        color: "#fff",
                    },
                    formatter: ((params) => {
                        return `<div style="font-size:15px;">${params[0].axisValue}</div>
              <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">当月：</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 18px;">${this.data1[params[0].dataIndex]}</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 14px; ">亿元</p>
              </div>`;
                    })
                },
                grid: {
                    left: '5%',
                    right: '3%',
                    top: '20%',
                    bottom: '20%'
                },
                color: ['#4472C5', '#ED7C30'],
                legend: {
                    orient: 'horizontal',
                    right: '12.5%',
                    textStyle: {
                        color: '#A1D5FF',
                        fontSize: 16
                    },
                },
                xAxis: [{
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: true,
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#97C9FF',
                            fontSize: 16
                        },
                        margin: 15 // 刻度标签与轴线之间的距离。
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: 'gray',
                            opacity: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    boundaryGap: true,
                    splitLine: {
                        show: false,
                        width: 0.08,
                        lineStyle: {
                            type: "solid",
                            color: "#red"
                        }
                    }
                }],
                yAxis: [
                    {
                        name: '(亿元)',
                        nameTextStyle: {
                            align: 'left',
                            color: '#97C9FF',
                            padding: [0, 0, 0, -50],
                            fontSize: 10,
                        },
                        //背景网格为虚线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                opacity: 0.5
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#97C9FF',
                                fontSize: 16,
                            }
                        }
                    },
                    {
                        name: '',
                        nameTextStyle: {
                            color: '#97C9FF',
                            fontSize: 10,
                        },
                        splitLine: {show: false},
                        axisLine: {show: false},
                        axisTick: {show: false},
                        axisLabel: {
                            textStyle: {
                                color: '#97C9FF',
                                fontSize: 16,
                            }
                        }
                    }],
                series: [
                    //data传月度值
                    {
                        data: this.data1,
                        stack: "zs",
                        type: "bar",
                        barMaxWidth: "auto",
                        barWidth: 25,
                        itemStyle: {
                            color: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                type: "linear",
                                global: false,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#5EA1FF",
                                    },
                                    {
                                        offset: 1,
                                        color: "#90BEFF",
                                    },
                                ],
                            },
                        },
                    },
                    //data传月度值
                    {
                        name: '月度值',
                        data: this.data1,
                        type: "pictorialBar",
                        barMaxWidth: "1",
                        symbol: "diamond",
                        symbolOffset: [0, "50%"],
                        symbolSize: [30, 6],
                        zlevel: 2,
                        itemStyle: {
                            normal: {
                                color: '#87CEEB',
                            },
                        },
                    },
                    //data传月度值
                    {
                        data: this.data1,
                        type: "pictorialBar",
                        barMaxWidth: "5",
                        symbolPosition: "end",
                        symbol: "diamond",
                        symbolOffset: [0, "-50%"],
                        symbolSize: [30, 6],
                        zlevel: 2,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#87CEEB',
                                        fontSize: 16
                                    }
                                },
                                color: '#87CEEB',
                            },
                        },
                    }
                ]
            },

            option3: {
                tooltip: {
                    backgroundColor: "#00194A",
                    trigger: 'axis',
                    textStyle: {
                        fontSize: 16,
                        color: "#fff",
                    },
                    formatter: ((params) => {
                        return `<div style="font-size:15px;">${params[0].axisValue}止累计</div>
              <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">累计：</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 18px;">${this.data3[params[0].dataIndex]}</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 14px; ">亿元</p>
              </div>
              <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">同比：</p>
                <p style="display: inline;color: lawngreen;font-size: 18px;">${this.data2[params[0].dataIndex]}</p>
                <p style="display: inline;color: lawngreen;font-size: 14px; ">%</p>
              </div>`;
                    })
                },
                grid: {
                    left: '5%',
                    right: '3%',
                    top: '20%',
                    bottom: '20%'
                },
                color: ['#4472C5', '#ED7C30'],
                legend: {
                    orient: 'horizontal',
                    right: '12.5%',
                    textStyle: {
                        color: '#A1D5FF',
                        fontSize: 16
                    },
                },
                xAxis: [{
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: true,
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#97C9FF',
                            fontSize: 16
                        },
                        margin: 15 // 刻度标签与轴线之间的距离。
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: 'gray',
                            opacity: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    boundaryGap: true,
                    splitLine: {
                        show: false,
                        width: 0.08,
                        lineStyle: {
                            type: "solid",
                            color: "#red"
                        }
                    }
                }],
                yAxis: [
                    {
                        name: '(亿元)',
                        nameTextStyle: {
                            align: 'left',
                            color: '#97C9FF',
                            padding: [0, 0, 0, -50],
                            fontSize: 10,
                        },
                        //背景网格为虚线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                opacity: 0.5
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#97C9FF',
                                fontSize: 16,
                            }
                        }
                    },
                    {
                        name: '(%)',
                        nameTextStyle: {
                            color: '#97C9FF',
                            fontSize: 10,
                        },
                        splitLine: {show: false},
                        axisLine: {show: false},
                        axisTick: {show: false},
                        axisLabel: {
                            textStyle: {
                                color: '#97C9FF',
                                fontSize: 16,
                            }
                        }
                    }],
                series: [
                    //data传月度值
                    {
                        data: this.data1,
                        stack: "zs",
                        type: "bar",
                        barMaxWidth: "auto",
                        barWidth: 25,
                        itemStyle: {
                            color: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                type: "linear",
                                global: false,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#5EA1FF",
                                    },
                                    {
                                        offset: 1,
                                        color: "#90BEFF",
                                    },
                                ],
                            },
                        },
                    },
                    //data传月度值
                    {
                        name: '月度累计值',
                        data: this.data1,
                        type: "pictorialBar",
                        barMaxWidth: "1",
                        symbol: "diamond",
                        symbolOffset: [0, "50%"],
                        symbolSize: [30, 6],
                        zlevel: 2,
                        itemStyle: {
                            normal: {
                                color: '#87CEEB',
                            },
                        },
                    },
                    //data传月度值
                    {
                        data: this.data1,
                        type: "pictorialBar",
                        barMaxWidth: "5",
                        symbolPosition: "end",
                        symbol: "diamond",
                        symbolOffset: [0, "-50%"],
                        symbolSize: [30, 6],
                        zlevel: 2,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#87CEEB',
                                        fontSize: 16
                                    }
                                },
                                color: '#87CEEB',
                            },
                        },
                    },
                    //data传月度累计同比，黄色的折线图
                    {
                        name: '月度累计同比',
                        'z': 9,
                        yAxisIndex: 1,
                        type: 'line',
                        data: this.data2,
                        symbolSize: '8',//折线图原点大小
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: '#ffbb00' // 线条颜色
                            },
                            borderColor: 'rgba(0,0,0,.4)'
                        },
                    }
                ]
            },
        }
    }
}
</script>

<style scoped>

</style>